window.addEventListener('load',function(){
let tit =document.querySelector('.tit')
let songID=0;
let index=0;
let arr=['new','hot'];
   // 分页
let page = location.hash.replace('#!fenye=', '') || 1;
let pageSize = 30;
let totals = 0;
// 下拉框的显示与隐藏
$('.tit').click(function(){
    $('.tit').toggleClass('rota');
    $('#songTitSelect').toggle();
    $('.main_con').css('zIndex','1')
    $('#box').toggle();
})
$('#box').click(function(){
     $('.tit').removeClass('rota').addClass('tit');
     $('#songTitSelect').hide();
     $('#box').hide();
})
// 先渲染一次
songList()
// tab切换
$('#songLists a').click(function(){
    $(this).addClass('actives').siblings().removeClass('actives') 
    index=$(this).index();
    songList();
})

// 滚动条
$("#songTitSelect").niceScroll({
    cursorcolor:'#7f7f7f',
    cursorborderradius:'3px',
    cursorwidth: "8px",
})

// 渲染下拉框数据
fetch("http://39.96.88.57:9090/api/www/playlist/getTagList?httpsStatus=1").then(res => res.json()).then(res=>{
        let str='';
        uls.innerHTML+=`
         <li class="item_list">
                            <p class="tip flex">
                                <i class="icon"></i>
                                <span>默认</span>
                            </p>
                            <ul class="flex list_tags">
                                <li class="item active">
                                    <span>精选歌单</span>
                                </li>
                            </ul>
            </li> `
        res.data.forEach((item,index) => {
            console.log(item.img1);
        if(index<res.data.length-1){
        str='';
        for (let i = 0; i < item.data.length; i++) {
          str+=`
            <li class="item" data-id="${item.data[i].id}">
            <span>${item.data[i].name}</span>
            </li>
          `
        }
        uls.innerHTML+=`
             <li class="item_list">
               <p class="tip flex">
               <span><img src="${item.img1}"></span>
               </p>
               <ul class="flex list_tags">
                 ${str}
               </ul>
               
            </li>
            `
            }
   });

    $('.list_tags .item').click(function(){
    $('#songLists').hide();
    $('#box').hide();
    $('.tit').toggleClass('rota');
})

let items =document.querySelectorAll('.list_tags .item');
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click',function(){
    list.innerHTML=''
    songID=items[i].dataset.id;
    selectSong();
    tit.innerText=items[i].innerText;
    items[index].classList.remove('active');
    index=i;
    items[index].classList.add('active')
    songTitSelect.style.display='none';
  })
}
items[0].addEventListener('click',function(){
songLists.style.display='block';
    selectList.innerHTML='';
    songList();
})




})
// 渲染歌手歌单数据
function songList(){
    fetch(`http://39.96.88.57:9090/api/www/classify/playlist/getRcmPlayList?pn=${page}&rn=${pageSize}&order=${arr[index]}&httpsStatus=1`).then(res => res.json()).then(res=>{
     list.innerHTML='';
     totals=res.data.total;
     res.data.data.forEach((item,index)=>{
        if(index<20){
            list.innerHTML+=
            `
             <li>
             <a href="./songListDetails.html?id=${item.id}">
             <div class="list-bg">
                 <img src="${item.img}" alt="">
                 <div class="cover">
                        <span class="play">
                        <i class="play-icon"></i>
                        </span>
                    </div>
              </div>
                 <p class="name" title="${item.name}">${item.name}</p>
                 <p class="count">
                 <i class="icon count-icon"></i>
                    ${item.listencnt>10000?(item.listencnt/10000).toFixed(1)+'万':item.listencnt}
                </p>
             </a>
            </li>
            `
        }
   })
   render();
})

}

// 渲染下拉框的歌单
 function selectSong(){
    fetch(`http://39.96.88.57:9090/api/www/classify/playlist/getTagPlayList?pn=${page}&rn=${pageSize}&id=${songID}&httpsStatus=1&reqId=fc582310-53ea-11ec-9fa7-d7b7d36c5792`).then(res => res.json()).then(res=>{
    totals=res.data.total;
   selectList.innerHTML='';
     totals=res.data.total;
     res.data.data.forEach((item,index)=>{
        if(index<20){
            selectList.innerHTML+=
            `
             <li>
            <a href="./songListDetails.html?id=${item.id}">
             <div class="list-bg">
                 <img src="${item.img}" alt="">
                 <div class="cover">
                        <span class="play">
                        <i class="play-icon"></i>
                        </span>
                    </div>
              </div>
                 <p class="name" title="${item.name}">${item.name}</p>
                 <p class="count">
                 <i class="icon count-icon"></i>
                    ${item.listencnt>10000?(item.listencnt/10000).toFixed(1)+'万':item.listencnt}
                </p>
            </a>
            </li>
            `
        }
   })
   render();
    

})

 }

// 分页
        render()
        function render() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem:'pagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totals, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            selectSong();
                            songList();
                        }
                    }
                });
            });


        }

})


    




